import router from '@/router'
// 缓存navTabs，点击左边aside加入navTab然后再在头部通过循环显示出来
const persistNavTabs = (navTabs) => {
  sessionStorage.setItem('navTabs', JSON.stringify(navTabs))
}
export default {
  // 使用时加上模块名
  namespaced: true,
  // 数据----data
  state: {
    // 控制导航是否展开
    navCollapse: false,
    // 定义一个空的数组，每一项存放的是对象，用来接收tab标签
    navtabs:
      sessionStorage.getItem('navTabs')
        // 如果不为空
        ? JSON.parse(sessionStorage.getItem('navTabs'))
        // 如果为空
        : []
  },
  // 方法------methods
  mutations: {
    // 通过图标切换菜单折叠和展开
    TOGGLE_MENU(state) {
      state.navCollapse = !state.navCollapse
    },
    // 添加navtab里面的标签
    ADD_NAV_TAB(state, tab) {
      // 如果navtab中已经有了则不需要添加，默认显示dashboard,要用到sessionstorage
      // 先从缓存中获取并判断(在state中操作数据)
      const dontPUll = ['/dashBoard', '/addGood', '/upDataGoods', '/login']
      if (state.navtabs.find(_tab => _tab.path === tab.path) || dontPUll.includes(tab.path)) {
        return false
      }
      state.navtabs.push(tab)
      persistNavTabs(state.navtabs)
    },
    // 清空所有标签
    DEL_ALLTA(state) {
      state.navtabs = []
      sessionStorage.removeItem('navTabs')
    },
    // 关闭其他标签
    DEL_OTHER(state, index) {
      const oneNav = state.navtabs[index]
      state.navtabs = [oneNav]
      sessionStorage.setItem('navTabs', state.navtabs)
    },
    // 点击删除navtab标签
    DEL_TAB(state, dataPath = {}) {
      state.navtabs.splice(dataPath.index, 1)
      persistNavTabs(state.navtabs)
      console.log(state.navtabs)
      // 判断是否关闭的是自身这个tag，不是就不会发生跳转
      if (dataPath.cloPath == dataPath.nowPath) {
        // 判断是不是最后一个，如果是就返回首页
        if (state.navtabs.length) {
          // 判断是不是最后一个tag，是就往前跳转一个，不是就往后跳转一个
          if (dataPath.index == state.navtabs.length) {
            router.push(state.navtabs[state.navtabs.length - 1].path)
          } else {
            router.push(state.navtabs[dataPath.index].path)
          }
        } else {
          router.push('/dashBoard')
        }
      }
    }
  }
}
